<script setup lang="ts">
import SensitiveOperationPopup from '@/pages/statistics/components/SensitiveOperationPopup.vue'
import UvLine from '@/uv-ui/components/nv-line/uv-line.vue'
import * as echarts from 'echarts'
const chartOptions = {
  color: [
    '#FF7978',
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de',
    '#3ba272',
    '#fc8452',
    '#9a60b4',
    '#ea7ccc',
  ],
  tooltip: {
    trigger: 'item',
  },
  legend: {
    show: false,
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['48%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: false,
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: '营业收入' },
        { value: 735, name: '优惠金额（元）' },
      ],
    },
  ],
}
const chartRef = ref()
onMounted(() => {
  // 组件能被调用必须是组件的节点已经被渲染到页面上
  setTimeout(async () => {
    if (!chartRef.value) return
    const myChart = await chartRef.value.init(echarts)
    myChart.setOption(chartOptions)
  }, 300)
})
const sensitiveRef = ref()
function openSensitive() {
  sensitiveRef.value.open()
}
function toDiscount() {
  uni.navigateTo({
    url: '/pages/statistics/discountsInfo',
  })
}
</script>

<template>
  <view>
    <!--    营业收入 start -->
    <view class="my-2 flex flex-col rounded-xl bg-primary px-[15px] py-[10px] text-white">
      <wd-text text="经营收入（元）" size="14px" color="#fff" />
      <wd-text text="173.00" size="32px" color="#fff" bold />
      <view class="grid grid-cols-3 mt-6 gap-2">
        <view class="flex flex-col">
          <wd-text text="营业额（元）" color="#fff" size="14px" />
          <wd-text text="229.00" color="#fff" size="20px" class="mt-2" />
        </view>
        <view class="flex flex-col">
          <wd-text text="优惠金额（元）" color="#fff" size="14px" />
          <wd-text text="56.00" color="#fff" size="20px" class="mt-2" />
        </view>
        <view class="flex flex-col">
          <wd-text text="订单量（单）" color="#fff" size="14px" />
          <wd-text text="3" color="#fff" size="20px" class="mt-2" />
        </view>
      </view>
    </view>
    <!--    营业收入 end -->
    <!--    营业构成 start -->
    <view class="mt-3 rounded-xl bg-white">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="营业构成" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
        <wd-text text="营业收入" size="12px">
          <template #suffix>
            <wd-icon name="fill-arrow-down" size="18px" />
          </template>
        </wd-text>
      </view>
      <view class="w-full" style="height: 200px">
        <l-echart ref="chartRef" />
      </view>
      <view class="px-[15px] py-[10px]">
        <view class="flex">
          <view class="flex-[2]" />
          <view class="flex-1">
            <wd-text text="营业收入（元）" size="12px" />
          </view>
          <view class="ml-4 flex-1">
            <wd-text text="优惠金额（元）" size="12px" />
          </view>
        </view>
      </view>
      <view class="mt-2">
        <uv-line />
      </view>
      <view class="px-[15px] py-[10px]">
        <view class="my-3 flex">
          <view class="flex-[2]">
            <wd-text text="店内销售" color="#333" />
          </view>
          <view class="flex-1">
            <wd-text text="3,067.48" size="16px" color="#333" />
          </view>
          <view class="ml-4 flex-1">
            <wd-text text="2,667.48" size="16px" color="#333" />
          </view>
        </view>
        <view class="my-3 flex">
          <view class="flex-[2]">
            <wd-text text="美团外卖销售" color="#333" />
          </view>
          <view class="flex-1">
            <wd-text text="1,067.48" size="16px" color="#333" />
          </view>
          <view class="ml-4 flex-1">
            <wd-text text="1,000.48" size="16px" color="#333" />
          </view>
        </view>
      </view>
    </view>
    <!--    营业构成 end -->
    <!--    敏感操作 start -->
    <view class="mt-3 rounded-xl bg-white">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="敏感操作" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
      <view>
        <wd-cell-group border>
          <wd-cell title="反结" value="共 7 单" />
          <wd-cell title="撤单" value="共 7 单" />
          <wd-cell title="免单" value="共 7 单" />
        </wd-cell-group>
      </view>
      <view class="px-[15px] py-[10px] text-right">
        <wd-text text="查看全部" size="14px" @click="openSensitive">
          <template #suffix>
            <wd-icon name="arrow-right" size="14px" />
          </template>
        </wd-text>
      </view>
    </view>
    <!--    敏感操作 end -->
    <!--    优惠构成 start -->
    <view class="mt-3 rounded-xl bg-white">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="优惠构成" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
      <view
        class="mx-[15px] my-2 flex items-center justify-between rounded-lg bg-[#F7F8F9] p-[10px]"
      >
        <wd-text text="优惠金额(元)" color="#333" />
        <wd-text text="1,042.02" color="#333" />
      </view>
      <view>
        <wd-cell-group border>
          <wd-cell title="手动折扣" value="293.92 元" />
          <wd-cell title="店内促销" value="686.00 元" />
          <wd-cell title="抹零" value="62.10 元" />
        </wd-cell-group>
        <view class="px-[15px] py-[10px] text-right">
          <wd-text text="查看全部" size="14px" @click="toDiscount">
            <template #suffix>
              <wd-icon name="arrow-right" size="14px" />
            </template>
          </wd-text>
        </view>
      </view>
    </view>
    <!--    优惠构成 end -->
    <!--    营业收入构成 start -->
    <view class="mt-3 rounded-xl bg-white">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="营业收入构成" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
      <view
        class="mx-[15px] my-2 flex items-center justify-between rounded-lg bg-[#F7F8F9] p-[10px]"
      >
        <wd-text text="营业收入(元)" color="#333" />
        <wd-text text="1,042.02" color="#333" />
      </view>
      <view>
        <wd-cell-group border>
          <wd-cell title="现金" value="293.92 元" />
          <wd-cell title="会员余额" value="686.00 元" />
          <wd-cell title="自定义名称" value="62.10 元" />
        </wd-cell-group>
        <view class="px-[15px] py-[10px] text-right">
          <wd-text text="查看全部" size="14px">
            <template #suffix>
              <wd-icon name="arrow-right" size="14px" />
            </template>
          </wd-text>
        </view>
      </view>
    </view>
    <!--    营业收入构成 end -->
  </view>
  <sensitive-operation-popup ref="sensitiveRef" />
</template>

<style scoped lang="scss"></style>
